<div class="panel panel-default panel-lite">

  <div class="panel-heading">
    <h3 class="panel-title">Meta Data</h3>
    <ul class="panel-controls">
      <li><a class="panel-collapse" href="#"><span class="fa fa-angle-down"></span></a></li>
    </ul>
  </div>

  <div class="panel-body ">
    <%
            @rand = "r#{Time.now.to_i}#{rand(99 ... 99999)}"
            values = record.new_record? ? [] : record.get_meta("_set_meta_data", {}).map{|k,v| {key: k, value: v}}
            values = params[:meta_data] if params[:meta_data].present?
        %>
        <div class="item-custom-field" style="padding: 0; border: none">
          <div id="content-field-<%= @rand %>" class="editor-custom-fields">

            <div class="clone-field hidden">
              <div class="input-group">
                <div class="actions">
                  <i class="fa fa-arrows"></i> <i class="fa fa-times text-danger"></i>
                </div>
                <div class="group-input-fields">
                  <div class="row">

                    <div style="float: left; padding-top: 8px;"><label>Key <em class='text-danger'>*</em> </label></div>
                    <div class="col-sm-6"><input type="text" name="meta_data[][key]" class="required input-key form-control"/></div>

                    <div class="clearfix" style="margin-bottom: 8px;"></div>

                    <div style="float: left; padding-top: 8px;"><label>Value </label></div>
                    <div class="col-sm-10"><input type="text" name="meta_data[][value]" class="form-control input-value"/></div>

                  </div>
                </div>
              </div>
            </div>

            <div class="list-fields">
              <ul id="sortable-<%= @rand %>" >

              </ul>
            </div>
                <div style="padding: 10px 0 0">
                  <a class="btn btn-warning btn-sm btn-add-field" href="#"> <i class="fa fa-plus"></i> Add Meta Data</a>
                </div>
          </div>
        </div>
        <script>
            jQuery(function($){
                var values = <%= raw(values.to_json) %>;
                var multiple = true;
                var $content = $("#content-field-<%= @rand %>");
                var $sortable = $("#sortable-<%= @rand %>");

                var $field = $('<li>' + $content.find('.clone-field').html() + '</li>');

                function add_field(data){
                    var field = $field.clone(true);
                    if(data.key) field.find('.input-key').val(data.key);
                    if(data.value) field.find('.input-value').val(data.value);
                    $sortable.append(field);
                }
                if(values.length > 0) {
                    $.each(values, function(i, data){
                        add_field(data);
                    });
                }// else add_field(default_value);

                if(multiple) {
                    $content.find('.btn-add-field').click(function(){
                        add_field({});
                        return false;
                    });
                    $sortable.delegate('.actions .fa-times', "click", function(){
                        var parent = $(this).parents('li');
                        if(confirm("Delete value?")){
                            parent.remove();
                        }
                        return false;
                    });
                    $sortable.sortable({
                        handle: ".fa-arrows"
                    });
                }
                $content.find('.clone-field').remove();
            });
        </script>
  </div>
</div>


